<template>
  <el-popover :width="200" trigger="hover">
    <el-checkbox-group :model-value="checkList" @change="(v) => $emit('change', v)">
      <el-checkbox v-for="item in filters" :label="item.value">{{ item.text }}</el-checkbox>
    </el-checkbox-group>
    <template #reference>
      <el-icon class="table-filter-popover-trigger-icon" :class="{ 'u-active': checkList.length }"><ArrowDown /></el-icon>
    </template>
  </el-popover>
</template>

<script setup name="TableFilterPopover">

defineProps({
  filters: Array, // Array<{text: string, value: string}>
  checkList: Array,
})
</script>

<style lang="stylus" scoped>
.table-filter-popover-trigger-icon
  display inline-block
  margin-left 5px
  cursor pointer
  &.u-active
    color red
</style>
